<template>
    <div class="user">
        <!--<qriously :value=val :size="240"/>-->
        <div class="head" @click="routerUser">
            <img :src="userInfo.avatar" alt="" class="head-l">
            <div class="head-m">
                <div class="head-mt">
                    <p class="p1">{{userInfo.nickname}}</p>
                    <div class="identity" v-if="userInfo.level!=='0'">
                        <svg class="icon head-r" aria-hidden="true">
                            <use :xlink:href="identityIcon"></use>
                        </svg>
                    </div>
                </div>
                <p class="p2">{{userInfo.role}} <span v-show="userInfo.owner=='1'">(群主)</span></p>
                <p class="p2">ID:{{userInfo.uid}} <span v-show="ouid!=='0' && ouid!==''">(旧ID:{{ouid}})</span></p>
            </div>
            <svg class="icon head-r" aria-hidden="true">
                <use xlink:href="#icon-chevronright"></use>
            </svg>
        </div>
        <p class="use-re">{{ textIdentity }}</p>
        <div class="charge">
            <div class="charge-t">
                <p class="p1">全部余额（元）</p>
                <p class="p2">{{balance}}</p>
            </div>
            <div class="charge-b">
                <div class="item">
                    <p class="p1">今日业绩（元）</p>
                    <p class="p2">{{userCapital.day}}</p>
                </div>
                <div class="item">
                    <p class="p1">即将到帐（元）</p>
                    <p class="p2">{{userCapital.froday}}</p>
                </div>
            </div>
            <!--            <van-progress-->
            <!--                    color="#bf2071"-->
            <!--                    pivot-text=""-->
            <!--                    :percentage="froday"-->
            <!--                    show-pivot="false"-->
            <!--                    class="progess"-->
            <!--            />-->
        </div>
        <div class="nav-row">
            <div class="nrow-l">
                <div class="row-it">
                    <p class="p1">全部收益（元）</p>
                    <p class="p2">￥{{userCapital.earning}}</p>
                </div>
                <div class="row-it">
                    <p class="p1">本月业绩（元）</p>
                    <p class="p2">￥{{userCapital.month}}</p>
                </div>
                <div class="row-it">
                    <p class="p1">群主收益（元）</p>
                    <p class="p2">￥{{userCapital.group}}</p>
                </div>
            </div>
            <div class="nrow-l">
                <div class="row-it">
                    <p class="p1">社群培育（元）</p>
                    <p class="p2">￥{{userCapital.edugroup}}</p>
                </div>
                <div class="row-it">
                    <p class="p1">3%区域收益（元）</p>
                    <p class="p2">￥{{userCapital.three_percentile}}</p>
                </div>
                <div class="row-it">
                    <p class="p1"></p>
                    <p class="p2"></p>
                </div>
            </div>
        </div>
        <!--资金-->
        <div class="sub">
            <div class="sub-i" @click="routerCapital">
                <p class="p1">资金记录</p>
            </div>
            <div class="vertical"></div>
            <div class="sub-i" @click="routerAmount">
                <p class="p1 maic">使用金额</p>
            </div>
        </div>
        <div class="line-10"></div>
        <section class="order">
            <div class="top">
                <div class="name">
                    <svg class="icon bf" aria-hidden="true">
                        <use xlink:href="#icon-my_order2"></use>
                    </svg>
                    <p>功能汇总</p>
                </div>
                <div class="all">
                </div>
            </div>
            <div class="line"></div>
            <div class="body">
                <div class="item" @click="routeCode" v-show="userInfo.isextension">
                    <div>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-erweima1"></use>
                        </svg>
                    </div>
                    <p>二维码</p>
                </div>
                <div class="item" @click="routeRank">
                    <div>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-paihangbang"></use>
                        </svg>
                    </div>
                    <p>排行榜</p>
                </div>
                <div class="item" @click="routeSearchArea">
                    <div>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-weikaitonghehuorendi"></use>
                        </svg>
                    </div>
                    <p>地区查询</p>
                </div>
                <div class="item" @click="routeCustomer">
                    <div>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-wodekehu"></use>
                        </svg>
                    </div>
                    <p>我的客户</p>
                </div>
                <div class="item" @click="routeOpenArea" v-show="canApply">
                    <div>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shenqing1"></use>
                        </svg>
                    </div>
                    <p>代理申请</p>
                </div>
                <div class="item" @click="routeGroup"
                     v-show="userInfo.iscanbuygroup">
                    <div>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-shengji"></use>
                        </svg>
                    </div>
                    <p>升级群主身份</p>
                </div>
                <div class="item" @click="routeCard"
                     v-show="userInfo.iscardbag">
                    <div>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-shengji"></use>
                        </svg>
                    </div>
                    <p>卡包</p>
                </div>
                <div class="item" @click="toPolyAccount">
                    <div>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-guangbo"></use>
                        </svg>
                    </div>
                    <p>聚合账号</p>
                </div>
                <div class="item" @click="toPolySet">
                    <div>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-bangding1"></use>
                        </svg>
                    </div>
                    <p>聚合绑定</p>
                </div>
                <div class="item" @click="toAddressList">
                    <div>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-fuwudiqiu"></use>
                        </svg>
                    </div>
                    <p>收货地址</p>
                </div>
                <div class="item" @click="toProblem">
                    <div>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-huixingzhen"></use>
                        </svg>
                    </div>
                    <p>常见问题解答</p>
                </div>
                <div class="item" @click="routeRevise">
                    <div>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-yuanquyunwei"></use>
                        </svg>
                    </div>
                    <p>设置</p>
                </div>
                <div class="item" @click="toCustomer">
                    <div>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-settingcopy1"></use>
                        </svg>
                    </div>
                    <p>客服咨询</p>
                </div>
            </div>
        </section>
        <div class="line-10"></div>
        <user-nav text="我的拼团" icon="#icon-iconfontpin" @click.native="toGroupShop"></user-nav>
        <div class="line-10"></div>
        <sprea-nav
                text="免费名额开通vip"
                icon="#icon-mianfeimingekaitongv"
                color="#1a96db"
                v-if="userInfo.isshowvip"
                @click.native="toAuthorize('vip')"
        ></sprea-nav>
        <sprea-nav
                text="免费名额开通总代"
                icon="#icon-mianfeimingekaitongz1"
                color="#1a96db"
                v-if="userInfo.isshowtop"
                @click.native="toAuthorize('top')"
        ></sprea-nav>
        <sprea-nav
                text="开通小号（限制）"
                icon="#icon-kaitongxiaohao"
                color="#1a96db"
                @click.native="toAuthorize('sub')"
        ></sprea-nav>
        <sprea-nav
                text="APP下载"
                icon="#icon-shouji-"
                color="#bfbfbf"
                @click.native="toApp('app')"
        ></sprea-nav>
        <!--        <user-nav text="聚合账号" icon="#icon-integralcopy" @click.native="toPolyAccount"></user-nav>-->
        <!--        <div class="line"></div>-->
        <!--        <user-nav text="聚合账号设置" icon="#icon-settingcopy1" @click.native="toPolySet"></user-nav>-->
        <!--        <div class="line-10"></div>-->
        <!--        <user-nav text="收货地址" icon="#icon-positioncopy" @click.native="toAddressList"></user-nav>-->
        <!--        <div class="line"></div>-->
        <!--        <user-nav text="常见问题解答" icon="#icon-questioncopy" @click.native="toProblem"></user-nav>-->
        <!--        <div class="line"></div>-->
        <!--        <user-nav text="客服咨询" icon="#icon-customercopy" @click.native="toCustomer"></user-nav>-->
        <!--        <div class="line"></div>-->
        <!--        <user-nav text="设置" icon="#icon-settingcopy1" @click.native="routeRevise"></user-nav>-->
        <confirm
                :title="alertMsg"
                :text="textConfirm1"
                :isAlert="false"
                ref="wechat"
                @cancel="weCancel"
                confirmBtnText="去设置"
                @confirm="weFirm"></confirm>
        <confirm
                :title="alertMsg"
                :text="textConfirm"
                :isAlert="true"
                ref="alert"
                @confirm="conFirm"
        ></confirm>
    </div>
</template>

<script>
    import {baseUrl} from '@/config';
    import userNav from '../../components/common/userNav';
    import spreaNav from '../../components/common/spreaNav';
    import API from '../../request/api';
    import {commonMixin, sysMixin} from '@/common/mixin';
    import {mapGetters, mapMutations} from 'vuex';
    import Confirm from '@/components/common/confirm';
    import {isIOS} from '@/common/utils';

    export default {
        /**
         * 个人中心
         * */
        components: {userNav, Confirm, spreaNav},
        name: 'user',
        mixins: [commonMixin, sysMixin],
        data() {
            return {
                stateEye: true, // 余额是否显示
                balance: 0, // 余额
                val: '', // 二维码测试
                capital: {}, // 资金相关数据
                identityIcon: '', // 身份图标
                ouid: '', // 老用户id
                alertMsg: '提示',
                textConfirm1: '您还未设置过密码或密码已失效为了您的账户安全请先设置密码',
                frozen_earning: '',
                userCapital: {},
                mainColor: '#bf2071',
                percent: 0, // 占百分比
                textConfirm: '',
                froday: 0,
                canApply: false,// 申请代理商资格默认没有
            };
        },
        computed: {
            money() {
                if (this.stateEye === true) {
                    return this.balance;
                } else {
                    return '***';
                }
            },
            frozenearning() {
                if (this.stateEye === true) {
                    return this.frozen_earning;
                } else {
                    return '***';
                }
            },
            textIdentity() {
                if (this.userInfo.showsup) {
                    return `${this.userInfo.showsupname}(推荐人${this.userInfo.showsup})`;
                } else {
                    return '暂无推荐人';
                }
            },
            ...mapGetters(['tokenArray', 'userInfo'])
        },
        methods: {
            toAuthorize(type) {
                this.$router.push({
                    name: 'authorize',
                    params: {
                        type: type
                    }
                });
            },
            conFirm() {
                //    申请代理商
                if (this.canApply) {
                    // alert(9999);
                }
            },
            routeOpenArea() {
                //     申请开通合伙人地区查询
                this.$router.push({
                    name: 'area_open',
                    query: {
                        level: this.level
                    }
                });
            },
            routeGroup() {
                //    升级群主身份,跳转微信支付
                this.request.post(API.buyGroup).then((res) => {
                    console.log(res, '飒飒打撒');
                    this.$store.commit('dataCreatePay', {
                        getWayData: {
                            target_id: res.target_id,
                            target_type: res.target_type
                        }
                    });
                    //    去创建支付
                    this.$router.replace({
                        name: 'pay-choose'
                    });
                });
            },
            routeCustomer() {
                //    我的客户
                this.$router.push({
                    name: 'person_customer'
                });
            },
            routeSearchArea() {
                //    未开通合伙人地区查询
                this.$router.push({
                    name: 'area_search'
                });
            },
            routeRank() {
                //    排行榜跳转
                this.$router.push({
                    name: 'rank_list'
                });
            },
            routeCode() {
                //    路由二維碼
                this.$router.push({
                    name: 'personcode',
                    query: {
                        type: 'person'
                    }
                });
            },
            checkModify() {
                this.request.get(API.ismodify, {
                    phone: this.userInfo.realphone,
                    system: this.userInfo.system_id
                }).then((res) => {
                    // 查看是否设置过密码
                    if (res.ismodify == 0) {
                        // 没修改过，弹窗
                        this.$refs.wechat.show();
                    }
                });
            },
            weCancel() {
                // 下次再设置密码
                this.$router.back();
            },
            weFirm() {
                //  去设置密码
                this.$router.push({
                    name: 'phone',
                    query: {
                        type: '3',
                        state: true
                    }
                });
            },
            routeCard() {
                //    我的卡包
                this.$router.push({
                    name: 'cardbag'
                });
            },
            toProblem() {
                // 跳转常见问题
                this.$router.push({
                    name: 'problem'
                });
            },
            routerUser() {
                //    跳转个人中心
                this.$router.push({
                    name: 'personal'
                });
            },
            switchMoney() {
                //    切换余额显示状态
                this.stateEye = !this.stateEye;
            },
            toShopOrder(val) {
                this.$router.push({
                    name: 'shopOrderList',
                    query: {
                        active: val
                    }
                });
            },
            toOnlineRefund() {
                //售后订单
                this.$router.push({
                    name: 'refundList'
                });
            },
            toShopRefund() {
                this.$router.push({
                    name: 'shop-refundList'
                });
            },
            routeRevise() {
                //    设置
                this.$router.push({
                    name: 'revise'
                });
            },
            routerCapital() {
                //    跳转资金记录
                this.$router.push({
                    name: 'capital_record'
                });
            },
            routerAmount() {

                //    使用余额
                this.$router.push({
                    name: 'use_amount',
                    query: {
                        balance: this.balance
                    }
                });
            },
            loadIdentity() {
                // 加载身份
                // 0普通用户1创客2vip3总代4区及代理5市级代理6省级代理
                if (this.userInfo.level == '1') {
                    this.identityIcon = '#icon-yonghu-';
                } else if (this.userInfo.level == '2') {
                    this.identityIcon = '#icon-shanghuhaopeizhi';
                } else if (this.userInfo.level == '3') {
                    this.identityIcon = '#icon-jiaoseguanli-';
                } else if (this.userInfo.level == '4') {
                    this.identityIcon = '#icon-hezuoshang-';
                } else if (this.userInfo.level == '5') {
                    this.identityIcon = '#icon-tianjiazhanghao-';
                } else if (this.userInfo.level == '6') {
                    this.identityIcon = '#icon-zhanghaoliebiao-';
                }
                //    是否有老用户id
                if (this.userInfo.ouid !== '0') {
                    // 有老id
                    this.ouid = this.userInfo.ouid;
                }
            },            //更多推荐品牌--暂不启用
            toGroupShop() {
                this.$router.push({
                    name: 'group-order-list'
                });
            },
            toPolyAccount() {
                //当前system存入缓存，回退时使用返回对应系统
                localStorage.setItem('lastSystem', this.system);

                //1.获取跳转聚合帐号的token
                return this.request
                    .get(API.turnToPoly, {system: this.system})
                    .then((res) => {
                        if (res && res.token) {
                            //有token返回 使用该token跳转welcome 9999
                            this.$router.push({
                                name: 'welcome',
                                query: {
                                    system: 9999,
                                    token: res.token,
                                    token_type: res.token_type
                                }
                            });
                        } else {
                            //无token 证明无绑定 清理9999的旧token
                            let tokenArray = {...this.tokenArray};
                            delete tokenArray['9999'];
                            this.setTokenArray(tokenArray);

                            this.$router.push({
                                name: 'welcome',
                                query: {
                                    system: 9999,
                                }
                            });
                        }
                    })
                    .catch((err) => {
                        alert(err);
                        this.$toast.fail(err);
                    });
            },
            toPolySet() {
                this.$router.push({
                    name: 'poly-set'
                });
            },
            toAddressList() {
                this.$router.push({
                    name: 'address-list'
                });
            },
            toApp() {
                // 下载app
                // 先判断一下如果是iphone
                if (isIOS()) {

                    this.$router.push({
                        name: 'app-code'
                    });
                } else {
                    this.$router.push({
                        name: 'android-code'
                    });
                }
            },
            toCustomer() {
                // window.location.href = `https://webchat.7moor.com/wapchat.html?accessId=95145560-4f70-11e9-bdb0-9354e1ad17a8&system=${this.userInfo.system_id}&uid=${this.userInfo.uid}`;
                this.$router.push({
                    name: 'customerOn'
                });
            },
            ...mapMutations(['setTokenArray'])
        },
        watch: {},
        created() {
            // 外层动画关闭
            // document.getElementById('img').style.display = 'none';
            this.showGlobaLoading();
            this.checkModify();
            this.request.get(API.userCapital).then(res => {
                this.frozen_earning = res.frozen_earning;
                this.balance = res.balance;
                // this.froday = (10.6 / 60.3) * 100;
                if (this.userCapital.day > 0) {
                    this.froday = (this.userCapital.froday / this.userCapital.day) * 100;
                } else {
                    this.froday = 0;
                }
                this.request.get(API.canApply).then((res) => {
                    if (res.status === 1) {
                        this.canApply = true;
                        this.level = res.level;
                        this.textConfirm = `您已达到${res.levelname}身份升级条件 请点击“地区代理申请”查看`;
                        this.$refs.alert.show();
                    } else {
                        //    还不可以申请代理
                    }
                });
                this.userCapital = res;
                this.loadIdentity(); // 加载身份
                this.hideGlobaLoading();
            });
            // this.val = `${baseUrl}/king?referrer=${this.$store.state.login.userInfo.uid}&system=${this.$store.state.login.userInfo.system}`;
        },
        mounted() {
        }

    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .user {
        padding-bottom 4vw

        .head {
            width 100vw
            height vw(120)
            padding 0 cellPadding
            box-sizing border-box
            flex-x()
            background main-liner

            .head-l {
                width vw(65)
                height vw(65)
                border-radius 50%
                border 2px solid white
            }

            .head-m {
                flex 1
                padding-left vw(15)
                flex-y(, flex-start)

                .head-mt {
                    flex-x(flex-start)

                    .identity {
                        margin-left 2vw
                        width vw(19)
                        height vw(19)
                        border-radius 50%
                        background #DC4190
                        flex-x(center)
                    }
                }

                .p1 {
                    word-vw(word16, white)
                    line-height 1.6
                }

                .p2 {
                    word-vw(word12, white)
                    line-height 1.2
                }
            }

            .head-r {
                fill white
            }
        }

        .blance1 {
            height vw(24)
            width 100vw
            flex-x(, center)
            padding 0 vw(15)
            background white
            box-sizing border-box

            .p1 {
                word-vw(word12, gray9)

                .p2 {
                    word-vw(word26, main-color)
                    line-height 1.4
                }
            }
        }

        .blance {
            height vw(66)
            width 100vw
            flex-x(, center)
            padding vw(20) vw(15) 0
            background white
            box-sizing border-box

            .blance-l {
                flex-y(center, flex-start)

                .p1 {
                    word-vw(word12, gray9)
                }

                .p2 {
                    word-vw(word26, main-color)
                    line-height 1.4
                }
            }

            .blance-r {
                width vw(20)
            }
        }

        .grad {
            width 100vw
            height vw(110)
            flex-y(center)
            background main-liner

            .fillf {
                position absolute
                right vw(15)
            }
        }

        .use-re {
            width 100vw
            word-vw(12px, gray3)
            text-align center
            background white
            line-height vw(42)
            margin 0 auto
            border-bottom 1px solid gray5
        }

        .bf {
            fill #bfbfbf
        }

        .sub {
            flex-x(space-between, stretch)
            background white

            .sub-i {
                height vw(54)
                flex 1
                flex-y(center)

                .p1 {
                    word-vw(word16, gray3)
                }

                .p2 {
                    word-vw(word14, gray3)
                }

                .maic {
                    color main-color
                }
            }

            .vertical {
                width 1px
                background gray5
            }
        }

        .charge {
            flex-y()
            width 100vw
            padding vw(8) vw(25)
            background grayF
            box-sizing border-box
            border-bottom 1px solid gray5

            .charge-t {
                flex-y()
                margin-bottom vw(14)

                .p1 {
                    word-vw(12px, gray9)
                }

                .p2 {
                    word-vw(26px, main-color)
                }
            }

            .progess {
                flex 1
                width 100%
                margin vw(6) 0
            }

            .charge-b {
                flex-x()
                width 100%

                .item {
                    flex-y()
                    flex 1
                    height vw(32)

                    .p1 {
                        word-vw(12px, gray9)
                    }

                    .p2 {
                        word-vw(18px, gray3)
                    }
                }
            }
        }

        .order {
            .top {
                flex-x()
                height vw(45)
                line-height vw(45)
                padding 0 cellPadding
                background white

                .name {
                    font-size word16
                    color gray3
                    display flex
                    align-items center

                    .icon {
                        width vw(20)
                        height vw(20)
                        margin-right vw(5)
                        fill #F5890A
                    }

                    p {
                        wor-vw(word14, gray3)
                    }

                    .xsdd {
                        fill main-color
                    }
                }

                .all {
                    font-size word12
                    color gray9
                    display flex
                    align-items center

                    .arrow {
                        arrow()
                        margin-left vw(5)
                    }
                }
            }

            .line {
                line()
            }

            .body {
                flex-x(flex-start)
                flex-flow row wrap
                padding-top middleMargin
                background white

                .item {
                    width 25%
                    flex-y(center)
                    height vw(69)

                    .icon {
                        width vw(18)
                        height vw(18)
                        fill #F5890A
                    }


                    .dfh, .s-dfk {
                        fill #3D8FFE
                    }

                    .dsh, .dsy, .ysy {
                        fill #1296DB
                    }

                    div {
                        margin-bottom smallMargin
                    }

                    p {
                        word-vw(12px, gray6)
                    }
                }
            }

        }

        .nav-row {
            flex-y()
            background grayF
            width 100vw

            .nrow-l {
                flex-x()
                width 100%
                border-bottom 1px solid gray5

                .row-it {
                    flex 1
                    flex-y(center)
                    height vw(54)

                    .p1 {
                        word-vw(12px, gray9)
                    }

                    .p2 {
                        word-vw(16px, gray6)
                        line-height 2
                    }
                }
            }
        }
    }
</style>
